<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.agencyNo+'  '+item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>

          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName"
                       [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">绑定团购</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择绑定类型" formControlName="douYinMeiTuanType">
            <nz-option  nzLabel="不限" nzValue="-1"></nz-option>
            <nz-option  nzLabel="抖音绑定" nzValue="0"></nz-option>
            <nz-option  nzLabel="美团绑定" nzValue="1"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">关键字</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="keyword" nz-input formControlName="keyword" placeholder="手机号码/设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
    </div>

    <div class="item margin-bottom" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"
         [ngClass]="isMobile? '': 'padding-left'" style="text-align: right">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                    nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"></i>查询
      </button>
    </div>

  </div>
</form>


<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <!--<div class="margin-bottom">
    <button nz-button nzType="primary">
      <i nz-icon nzType="plus" nzTheme="outline"></i>添加
    </button>
  </div>-->
  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [nzLoading]=nzLoading
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
      <tr>
        <th></th>
        <th>场地ID</th>
        <th>场地</th>
        <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">合作伙伴</th>
        <th>运营商</th>
        <th>会员</th>
        <th>余币</th>
        <th>商户号</th>
        <th>扫码支付手续费率</th>
        <th>注册时间</th>
        <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR" nzRight>操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of nzTable.data let index = index">
        <tr>
          <td [(nzExpand)]="data.expand"></td>
          <td>{{ data.id }}</td>

          <td nzEllipsis>
            <div>{{ data.storeName }}</div>
            <div class="text-sm text-grey">{{data.address}}</div>
          </td>

          <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <a (click)="skipAgency(data)">
              <div>{{ data.agencyName }}</div>
              <div class="text-sm text-grey">{{ data.agencyNo}}</div>
            </a>
          </td>

          <td nzEllipsis>
            <a (click)="skipMerchant(data)" *ngIf="data.username">
              <div>{{data.username}}</div>
              <div class="text-sm text-grey">{{data.name}}</div>
            </a>
            <span *ngIf="!data.username"> <nz-tag nzColor="success">微信授权登录</nz-tag></span>
          </td>
          <td nzEllipsis>
            <a (click)="skipMember(data)">{{data.memberCount}}</a>
          </td>
          <td nzEllipsis>{{data.surplusCoin}}</td>
          <td nzEllipsis>{{data.merchantId}}</td>
          <td nzEllipsis>
            <div *ngIf="data.merchantId">
              {{data.feeValue | emptyCheckPipe:2 | percent:'1.0-3'}}
            </div>
          </td>
          <td nzEllipsis>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
          <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR" nzRight>
            <div (click)="clickQuota(data)"><a>限额</a></div>
            <div (click)="clickTimeLimit(data)"><a>限时</a></div>
            <div *ngIf="data.status == 0" (click)="lockUser(data,1,tplContent)"><a>冻结</a></div>
            <div *ngIf="data.status == 1" nz-tooltip [nzTooltipTitle]="contentTemplate"
               (click)="lockUser(data,0,tplContent)"><a>恢复</a></div>
            <ng-template #contentTemplate>
              <span *ngIf="data.freezeReason!=null">{{data.freezeReason}}</span>
              <span *ngIf="data.freezeReason==null">未知原因,请联系管理员</span>
            </ng-template>
          </td>
        </tr>

        <tr [nzExpand]="data.expand">
          <nz-table #innerTable [nzData]="data.commodityStorePackages" nzSize="middle" [nzShowPagination]="false" [nzScroll]="{ x: 'auto' }">
            <thead>
              <tr>
                <th nzAlign="center" nzLeft>售价</th>
                <th nzAlign="center">游戏币</th>
                <th nzAlign="center">赠送币</th>
                <th nzAlign="center">套餐推荐层次</th>
                <th nzAlign="center">是否推荐</th>
                <th nzAlign="center">是否隐藏</th>
                <th nzAlign="center">默认套餐</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of innerTable.data">
                <td nzEllipsis nzAlign="center" nzLeft>￥{{ data.retailPrice }}</td>
                <td nzEllipsis nzAlign="center">{{ data.rechargeCoin }}个</td>
                <td nzEllipsis nzAlign="center">{{ data.giveCoin }}个</td>
                <td nzEllipsis nzAlign="center">{{ data.sort }}</td>
                <td nzEllipsis nzAlign="center">{{ data.recommend ? '是' : '否' }}</td>
                <td nzEllipsis nzAlign="center">{{ data.hide ? '否' : '是' }}</td>
                <td nzEllipsis nzAlign="center">{{ data.isDefault ? '是' : '否' }}</td>
              </tr>
            </tbody>
          </nz-table>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</div>


<ng-template #tplContent let-params let-ref="modalRef">
  <nz-form-item>
    <nz-form-label [nzSpan]="5" nzFor="servicePhoneNo">冻结原因</nz-form-label>
    <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="请输入冻结原因!">
      <input nz-input onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" [(ngModel)]="freezeReason"
             [ngModelOptions]="true" placeholder="冻结原因"/>
    </nz-form-control>
  </nz-form-item>
</ng-template>


<app-store-quota [nzVisible]="nzVisible" [store]="store" (emit)="setStoreQuota($event)"></app-store-quota>

<app-store-time-limit [nzVisible]="nzVisibleTimeLimit" [store]="store"
                      (emit)="setStoreTimeLimit($event)"></app-store-time-limit>
